<template>
  <view class="wrapper suggest">
    <view class="suggest_form">
      <view class="row">
        <view class="label">联系手机</view>
        <input
          class="phone input"
          type="text"
          v-model="formData.phone"
          placeholder="请输入您的手机号码"
        />
      </view>
      <view class="row">
        <view class="label">投诉建议</view>
        <textarea
          class="suggest_content textarea"
          v-model="formData.content"
          rows="10"
          placeholder="请输入您的宝贵建议"
        ></textarea>
      </view>
      <view class="row">
        <text class="warning">请留下您的手机号，以便我们后续跟进~</text>
        <button type="primary" class="submit" @click="submitSuggestForm">
          立即提交
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        phone: "",
        content: "",
      },
    };
  },
  mounted() {
    this.resetForm();
  },
  methods: {
    resetForm() {
      this.formData.phone = "";
      this.formData.content = "";
    },
    submitSuggestForm() {
      if (this.formData.phone == "") {
        uni.showToast({
          title: "联系手机不能为空",
          icon: "none",
        });
        return false;
      } else if (!/^1[3-578]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: "手机号码格式不正确",
          icon: "none",
        });
        return false;
      }
      if (this.formData.content == "") {
        uni.showToast({
          title: "内容不能为空",
          icon: "none",
        });
        return false;
      }
      uni.showToast({
        title: "提交成功",
        duration: 2000,
        success: (res) => {
          setTimeout((res2) => {
            uni.navigateTo({
              url: "/pages/index/person",
            });
          }, 2000);
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.suggest {
  .row {
    margin-bottom: 20rpx;
  }
  .textarea {
    background: #e7e7e7;
    padding: 10rpx 20rpx;
    margin-top: 12rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
    width: 100%;
  }
  .input {
    background: #e7e7e7;
    box-sizing: content-box;
    padding: 10rpx 20rpx;
    margin-top: 12rpx;
    border-radius: 10rpx;
  }
  .submit {
    background: #db0000;
    position: fixed;
    bottom: 20rpx;
    width: 96%;
    left: 2%;
    line-height: 200%;
    height: auto !important;
  }
  .warning {
    text-align: center;
    font-size: 24rpx;
    display: block;
    margin-top: 10rpx;
    color: red;
  }
}
</style>
